<template>
  <div class="header-wrap">
    <div class="header-main flex">
      <div class="header-left">
        <div 
          class="logo pic" 
          @click="main">
          <img :src="logo">
        </div>
      </div>
      <div class="header-right">
        <fill-progress 
          :step="step" 
          :data="list"/>
      </div>
    </div>
  </div>
</template>
<script>
import fillProgress from './progress.vue'
export default {
  name: 'FillHeader',
  components: { fillProgress },
  props: {
    step: {
      type: [Number],
      default: 1
    },
    logo: {
      type: [String],
      default: require('static/img/blue-logo.jpg')
    }
  },
  data() {
    return {
      list: [
        this.$t('fillHeader.personInfo'),
        this.$t('fillHeader.contactInfo'),
        this.$t('fillHeader.identityInfo'),
        this.$t('fillHeader.payInfo')
      ],
      computedIcon: ''
    }
  },
  methods: {
    main() {
      this.$router.push({ path: '/' })
    }
  }
}
</script>
<style lang="scss">
.header-wrap {
  width: 100%;
  height: 100px;
  z-index: 999;
  background-color: transparent;

  .header-main {
    width: 1200px;
    height: 100%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    .header-left {
      width: auto;
      padding: 40px;
      height: 100%;
      display: flex;
      align-items: center;
      .logo {
        width: 103px;
        height: 87px;
        cursor: pointer;
      }
    }
    .header-right {
      padding-left: 50px;
    }
  }
}
</style>
